<template>
  <div class="audit-statistics">
    <!-- 页面头部 -->
    <header class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">统计信息</h1>
          <p class="page-subtitle">审核部门数据统计和分析</p>
        </div>
        <div class="header-actions">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="updateStats"
          />
          <el-button @click="exportReport">
            <i class="fas fa-download mr-2"></i>导出报告
          </el-button>
          <el-button @click="refreshData">
            <i class="fas fa-sync-alt mr-2"></i>刷新
          </el-button>
        </div>
      </div>
    </header>

    <!-- 核心指标 -->
    <div class="key-metrics">
      <div class="metrics-grid">
        <div class="metric-card">
          <div class="metric-icon bg-orange-100">
            <i class="fas fa-clock text-orange-600"></i>
          </div>
          <div class="metric-content">
            <h3>{{ stats.pendingCount }}</h3>
            <p>待处理条数</p>
            <div class="metric-trend">
              <span class="trend-text">本周新增 +{{ stats.weeklyNew }}</span>
            </div>
          </div>
        </div>
        
        <div class="metric-card">
          <div class="metric-icon bg-green-100">
            <i class="fas fa-check-circle text-green-600"></i>
          </div>
          <div class="metric-content">
            <h3>{{ stats.completedCount }}</h3>
            <p>结案条数</p>
            <div class="metric-trend positive">
              <i class="fas fa-arrow-up"></i>
              <span>+{{ stats.completionGrowth }}%</span>
            </div>
          </div>
        </div>
        
        <div class="metric-card">
          <div class="metric-icon bg-blue-100">
            <i class="fas fa-tasks text-blue-600"></i>
          </div>
          <div class="metric-content">
            <h3>{{ stats.totalProcessed }}</h3>
            <p>总处理数</p>
            <div class="metric-trend positive">
              <i class="fas fa-arrow-up"></i>
              <span>+{{ stats.processGrowth }}%</span>
            </div>
          </div>
        </div>
        
        <div class="metric-card">
          <div class="metric-icon bg-purple-100">
            <i class="fas fa-percentage text-purple-600"></i>
          </div>
          <div class="metric-content">
            <h3>{{ stats.approvalRate }}%</h3>
            <p>通过率</p>
            <div class="metric-trend positive">
              <i class="fas fa-arrow-up"></i>
              <span>+{{ stats.rateGrowth }}%</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="charts-section">
      <div class="charts-grid">
        <!-- 案件处理趋势图 -->
        <div class="chart-card">
          <div class="chart-header">
            <h3>案件处理趋势</h3>
            <el-select v-model="processTrendType" size="small">
              <el-option label="按天" value="daily"></el-option>
              <el-option label="按周" value="weekly"></el-option>
              <el-option label="按月" value="monthly"></el-option>
            </el-select>
          </div>
          <div class="chart-content">
            <div class="trend-chart">
              <div class="chart-item" v-for="item in processTrendData" :key="item.period">
                <div class="chart-bar">
                  <div class="bar pending" :style="{ height: item.pendingPercentage + '%' }"></div>
                  <div class="bar approved" :style="{ height: item.approvedPercentage + '%' }"></div>
                  <div class="bar rejected" :style="{ height: item.rejectedPercentage + '%' }"></div>
                </div>
                <div class="chart-label">{{ item.period }}</div>
                <div class="chart-value">{{ item.total }}</div>
              </div>
            </div>
            <div class="chart-legend">
              <div class="legend-item">
                <div class="legend-color pending"></div>
                <span>待处理</span>
              </div>
              <div class="legend-item">
                <div class="legend-color approved"></div>
                <span>已通过</span>
              </div>
              <div class="legend-item">
                <div class="legend-color rejected"></div>
                <span>已拒绝</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 案件类型分布 -->
        <div class="chart-card">
          <div class="chart-header">
            <h3>案件类型分布</h3>
          </div>
          <div class="chart-content">
            <div class="pie-chart-data">
              <div class="pie-item" v-for="item in caseTypeDistribution" :key="item.type">
                <div class="pie-color" :style="{ backgroundColor: item.color }"></div>
                <span class="pie-label">{{ item.type }}</span>
                <span class="pie-value">{{ item.count }}件 ({{ item.percentage }}%)</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 审核效率分析 -->
        <div class="chart-card">
          <div class="chart-header">
            <h3>审核效率分析</h3>
          </div>
          <div class="chart-content">
            <div class="efficiency-stats">
              <div class="efficiency-item">
                <div class="efficiency-label">平均处理时间</div>
                <div class="efficiency-value">{{ stats.avgProcessTime }}小时</div>
              </div>
              <div class="efficiency-item">
                <div class="efficiency-label">当日完成率</div>
                <div class="efficiency-value">{{ stats.dailyCompletionRate }}%</div>
              </div>
              <div class="efficiency-item">
                <div class="efficiency-label">积压案件数</div>
                <div class="efficiency-value">{{ stats.backlogCount }}件</div>
              </div>
            </div>
            
            <div class="process-time-chart">
              <h4>处理时间分布</h4>
              <div class="time-bars">
                <div class="time-bar-item" v-for="item in processTimeData" :key="item.range">
                  <div class="time-label">{{ item.range }}</div>
                  <div class="time-bar">
                    <div class="time-fill" :style="{ width: item.percentage + '%' }"></div>
                  </div>
                  <div class="time-count">{{ item.count }}件</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 审核员工作量统计 -->
        <div class="chart-card">
          <div class="chart-header">
            <h3>审核员工作量</h3>
          </div>
          <div class="chart-content">
            <div class="reviewer-stats">
              <div class="reviewer-item" v-for="reviewer in reviewerStats" :key="reviewer.name">
                <div class="reviewer-info">
                  <div class="reviewer-name">{{ reviewer.name }}</div>
                  <div class="reviewer-role">{{ reviewer.role }}</div>
                </div>
                <div class="reviewer-metrics">
                  <div class="metric">
                    <span class="metric-label">处理量</span>
                    <span class="metric-value">{{ reviewer.processed }}</span>
                  </div>
                  <div class="metric">
                    <span class="metric-label">通过率</span>
                    <span class="metric-value">{{ reviewer.approvalRate }}%</span>
                  </div>
                  <div class="metric">
                    <span class="metric-label">效率</span>
                    <span class="metric-value rating" :class="getEfficiencyClass(reviewer.efficiency)">
                      {{ reviewer.efficiency }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 详细数据表格 -->
    <div class="data-tables">
      <div class="table-tabs">
        <div
          v-for="tab in dataTabs"
          :key="tab.key"
          class="table-tab"
          :class="{ active: activeTab === tab.key }"
          @click="setActiveTab(tab.key)"
        >
          <i :class="tab.icon"></i>
          <span>{{ tab.name }}</span>
        </div>
      </div>

      <!-- 案件查询统计表 -->
      <div v-if="activeTab === 'cases'" class="table-section">
        <div class="table-controls">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索案件编号、申请人..."
            style="width: 300px;"
          >
            <template #prefix>
              <i class="fas fa-search"></i>
            </template>
          </el-input>
          <el-select v-model="statusFilter" placeholder="状态筛选" clearable>
            <el-option label="待处理" value="pending"></el-option>
            <el-option label="已通过" value="approved"></el-option>
            <el-option label="已拒绝" value="rejected"></el-option>
          </el-select>
        </div>
        
        <el-table :data="filteredCaseStats" style="width: 100%">
          <el-table-column prop="caseNo" label="案件编号" width="140"></el-table-column>
          <el-table-column prop="title" label="案件名称" width="200"></el-table-column>
          <el-table-column prop="applicant" label="申请人" width="100"></el-table-column>
          <el-table-column prop="type" label="类型" width="120"></el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="getStatusTagType(scope.row.status)">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="submittedAt" label="提交时间" width="120"></el-table-column>
          <el-table-column prop="processedAt" label="处理时间" width="120"></el-table-column>
          <el-table-column prop="reviewer" label="审核员"></el-table-column>
        </el-table>
      </div>

      <!-- 时间统计表 -->
      <div v-if="activeTab === 'time'" class="table-section">
        <el-table :data="timeStats" style="width: 100%">
          <el-table-column prop="period" label="时期" width="120"></el-table-column>
          <el-table-column prop="submitted" label="提交数量" width="120"></el-table-column>
          <el-table-column prop="processed" label="处理数量" width="120"></el-table-column>
          <el-table-column prop="approved" label="通过数量" width="120"></el-table-column>
          <el-table-column prop="rejected" label="拒绝数量" width="120"></el-table-column>
          <el-table-column prop="pending" label="待处理" width="100"></el-table-column>
          <el-table-column prop="efficiency" label="处理效率">
            <template #default="scope">
              {{ scope.row.efficiency }}%
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'

export default {
  name: 'AuditStatistics',
  setup() {
    // 响应式数据
    const dateRange = ref([
      dayjs().subtract(30, 'day').toDate(),
      dayjs().toDate()
    ])
    const processTrendType = ref('weekly')
    const activeTab = ref('cases')
    const searchKeyword = ref('')
    const statusFilter = ref('')
    
    // 统计数据
    const stats = reactive({
      pendingCount: 15,
      weeklyNew: 23,
      completedCount: 128,
      completionGrowth: 12.5,
      totalProcessed: 143,
      processGrowth: 8.7,
      approvalRate: 85,
      rateGrowth: 3.2,
      avgProcessTime: 4.5,
      dailyCompletionRate: 92,
      backlogCount: 8
    })
    
    // 处理趋势数据
    const processTrendData = ref([
      { period: '周一', total: 15, pendingPercentage: 20, approvedPercentage: 65, rejectedPercentage: 15 },
      { period: '周二', total: 22, pendingPercentage: 18, approvedPercentage: 68, rejectedPercentage: 14 },
      { period: '周三', total: 18, pendingPercentage: 25, approvedPercentage: 60, rejectedPercentage: 15 },
      { period: '周四', total: 28, pendingPercentage: 15, approvedPercentage: 70, rejectedPercentage: 15 },
      { period: '周五', total: 25, pendingPercentage: 20, approvedPercentage: 65, rejectedPercentage: 15 },
      { period: '周六', total: 12, pendingPercentage: 30, approvedPercentage: 55, rejectedPercentage: 15 },
      { period: '周日', total: 8, pendingPercentage: 35, approvedPercentage: 50, rejectedPercentage: 15 }
    ])
    
    // 案件类型分布
    const caseTypeDistribution = ref([
      { type: '民事纠纷', count: 45, percentage: 35.2, color: '#3b82f6' },
      { type: '劳动争议', count: 32, percentage: 25.0, color: '#10b981' },
      { type: '合同纠纷', count: 28, percentage: 21.9, color: '#f59e0b' },
      { type: '知识产权', count: 18, percentage: 14.1, color: '#ef4444' },
      { type: '其他', count: 5, percentage: 3.9, color: '#8b5cf6' }
    ])
    
    // 处理时间分布
    const processTimeData = ref([
      { range: '< 2小时', count: 45, percentage: 85 },
      { range: '2-4小时', count: 28, percentage: 65 },
      { range: '4-8小时', count: 15, percentage: 35 },
      { range: '8-24小时', count: 8, percentage: 20 },
      { range: '> 24小时', count: 3, percentage: 8 }
    ])
    
    // 审核员统计
    const reviewerStats = ref([
      { name: '张审核员', role: '高级审核员', processed: 58, approvalRate: 87, efficiency: '优秀' },
      { name: '李审核员', role: '审核员', processed: 45, approvalRate: 82, efficiency: '良好' },
      { name: '王审核员', role: '审核员', processed: 40, approvalRate: 85, efficiency: '良好' },
      { name: '赵审核员', role: '初级审核员', processed: 25, approvalRate: 78, efficiency: '一般' }
    ])
    
    // 数据表格标签
    const dataTabs = [
      { key: 'cases', name: '案件查询', icon: 'fas fa-search' },
      { key: 'time', name: '时间统计', icon: 'fas fa-clock' }
    ]
    
    // 案件统计数据
    const caseStats = ref([
      { caseNo: 'SH-2024-001', title: '交通事故赔偿案', applicant: '王先生', type: '民事纠纷', status: '已通过', submittedAt: '2024-01-20', processedAt: '2024-01-20', reviewer: '张审核员' },
      { caseNo: 'SH-2024-002', title: '劳动合同纠纷', applicant: '李女士', type: '劳动争议', status: '待处理', submittedAt: '2024-01-19', processedAt: '-', reviewer: '-' },
      { caseNo: 'SH-2024-003', title: '房屋买卖纠纷', applicant: '张先生', type: '合同纠纷', status: '已拒绝', submittedAt: '2024-01-18', processedAt: '2024-01-19', reviewer: '李审核员' }
    ])
    
    // 时间统计数据
    const timeStats = ref([
      { period: '本周', submitted: 28, processed: 25, approved: 20, rejected: 5, pending: 3, efficiency: 89 },
      { period: '上周', submitted: 35, processed: 35, approved: 28, rejected: 7, pending: 0, efficiency: 100 },
      { period: '本月', submitted: 128, processed: 115, approved: 95, rejected: 20, pending: 13, efficiency: 90 },
      { period: '上月', submitted: 156, processed: 156, approved: 128, rejected: 28, pending: 0, efficiency: 100 }
    ])
    
    // 计算属性
    const filteredCaseStats = computed(() => {
      let result = caseStats.value
      
      if (searchKeyword.value) {
        const keyword = searchKeyword.value.toLowerCase()
        result = result.filter(item =>
          item.caseNo.toLowerCase().includes(keyword) ||
          item.applicant.toLowerCase().includes(keyword)
        )
      }
      
      if (statusFilter.value) {
        result = result.filter(item => item.status === statusFilter.value)
      }
      
      return result
    })
    
    // 方法
    const refreshData = () => {
      ElMessage.success('数据已刷新')
    }
    
    const updateStats = () => {
      ElMessage.info('统计数据已更新')
    }
    
    const exportReport = () => {
      ElMessage.success('报告导出成功')
    }
    
    const setActiveTab = (tab) => {
      activeTab.value = tab
    }
    
    const getEfficiencyClass = (efficiency) => {
      if (efficiency === '优秀') return 'excellent'
      if (efficiency === '良好') return 'good'
      return 'normal'
    }
    
    const getStatusTagType = (status) => {
      const typeMap = {
        '待处理': 'warning',
        '已通过': 'success',
        '已拒绝': 'danger'
      }
      return typeMap[status] || ''
    }
    
    return {
      dateRange,
      processTrendType,
      activeTab,
      searchKeyword,
      statusFilter,
      stats,
      processTrendData,
      caseTypeDistribution,
      processTimeData,
      reviewerStats,
      dataTabs,
      filteredCaseStats,
      timeStats,
      refreshData,
      updateStats,
      exportReport,
      setActiveTab,
      getEfficiencyClass,
      getStatusTagType
    }
  }
}
</script>

<style scoped>
.audit-statistics {
  padding: 24px;
  background-color: #f9fafb;
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  font-size: 28px;
  font-weight: bold;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.page-subtitle {
  color: #6b7280;
  margin: 0;
  font-size: 14px;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 核心指标 */
.key-metrics {
  margin-bottom: 24px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.metric-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.metric-icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.metric-icon i {
  font-size: 28px;
}

.metric-content h3 {
  font-size: 32px;
  font-weight: bold;
  margin: 0 0 4px 0;
  color: #1f2937;
}

.metric-content p {
  margin: 0 0 8px 0;
  color: #6b7280;
  font-size: 14px;
}

.metric-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
}

.metric-trend.positive {
  color: #10b981;
}

.trend-text {
  color: #6b7280;
}

/* 图表区域 */
.charts-section {
  margin-bottom: 24px;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}

.chart-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.chart-content {
  height: 300px;
}

/* 趋势图 */
.trend-chart {
  display: flex;
  justify-content: space-around;
  align-items: end;
  height: 200px;
  margin-bottom: 20px;
}

.chart-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.chart-bar {
  display: flex;
  flex-direction: column;
  justify-content: end;
  height: 150px;
  width: 30px;
  margin-bottom: 8px;
}

.bar {
  width: 100%;
  min-height: 4px;
  margin-bottom: 2px;
}

.bar.pending { background: #f59e0b; }
.bar.approved { background: #10b981; }
.bar.rejected { background: #ef4444; }

.chart-label {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}

.chart-value {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #6b7280;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.legend-color.pending { background: #f59e0b; }
.legend-color.approved { background: #10b981; }
.legend-color.rejected { background: #ef4444; }

/* 饼图数据 */
.pie-chart-data {
  padding: 20px 0;
}

.pie-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.pie-color {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.pie-label {
  flex: 1;
  font-weight: 500;
  color: #374151;
}

.pie-value {
  font-size: 14px;
  color: #6b7280;
}

/* 效率统计 */
.efficiency-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.efficiency-item {
  text-align: center;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
}

.efficiency-label {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 8px;
}

.efficiency-value {
  font-size: 24px;
  font-weight: bold;
  color: #1f2937;
}

.process-time-chart h4 {
  font-size: 14px;
  color: #374151;
  margin-bottom: 12px;
}

.time-bars > * + * {
  margin-top: 8px;
}

.time-bar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.time-label {
  width: 80px;
  font-size: 12px;
  color: #6b7280;
}

.time-bar {
  flex: 1;
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.time-fill {
  height: 100%;
  background: #3b82f6;
}

.time-count {
  width: 40px;
  text-align: right;
  font-size: 12px;
  color: #6b7280;
}

/* 审核员统计 */
.reviewer-stats > * + * {
  margin-top: 16px;
}

.reviewer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  margin-bottom: 16px;
}

.reviewer-info {
  display: flex;
  flex-direction: column;
}

.reviewer-name {
  font-weight: 600;
  color: #1f2937;
}

.reviewer-role {
  font-size: 12px;
  color: #6b7280;
}

.reviewer-metrics {
  display: flex;
  gap: 24px;
}

.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.metric-label {
  font-size: 12px;
  color: #6b7280;
}

.metric-value {
  font-weight: 600;
  color: #1f2937;
}

.metric-value.rating.excellent { color: #10b981; }
.metric-value.rating.good { color: #3b82f6; }
.metric-value.rating.normal { color: #f59e0b; }

/* 数据表格 */
.data-tables {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.table-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid #e5e7eb;
}

.table-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #6b7280;
  border-bottom: 2px solid transparent;
}

.table-tab:hover {
  color: #374151;
}

.table-tab.active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
}

.table-section {
  margin-top: 20px;
}

.table-controls {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .charts-grid {
    grid-template-columns: 1fr;
  }
  
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .efficiency-stats {
    grid-template-columns: 1fr;
  }
  
  .reviewer-metrics {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 768px) {
  .audit-statistics {
    padding: 16px;
  }
  
  .metrics-grid {
    grid-template-columns: 1fr;
  }
  
  .header-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .table-tabs {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .table-controls {
    flex-direction: column;
  }
}
</style>